<template>
    <div class="changePassword">
        <div class="changePassword-top">
            <van-icon name="arrow-left" @click="$router.go(-1)" />
            <span>个人信息</span>
        </div>
        <div class="field">
            <van-field v-model="value" :style="{ 'margin-top': '30px', 'border-bottom': '1px solid #ccc' }" label="old"
                placeholder="请输入原密码" />
            <van-field v-model="value1" label="new" placeholder="请输入新密码" />
            <van-field v-model="value2" label="confirm" placeholder="确认新密码" />
        </div>
        <van-button @click="changeM" type="primary" :style="{ margin: '30px' }">确认修改</van-button>
    </div>
</template>

<script>
import { chexkWord } from '../request/api/changePassword.js'
import { mapState } from 'vuex';
export default {
    name: 'changePassword',
    data() {
        return {
            value: '',
            value1: '',
            value2: ''
        }
    },
    computed: {
        ...mapState(['uid'])
    },
    methods: {
        async changeM() {
            if (this.value1 === this.value2) {
                let res = await chexkWord({
                    oldPassword: this.value,
                    newPassword: this.value1,
                    uid: this.uid
                });
                if (res.data.msg == '修改成功') {
                    this.$router.push('/login');
                    this.$toast.success('修改成功');
                }
                if (res.status !== 200) {
                    this.$toast.fail('修改失败');
                }
            } else {
                this.$toast('两次密码输入不一致');
            }
        }
    }
}
</script>

<style lang="less" scoped>
.changePassword {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .changePassword-top {
        width: 100%;
        height: 60px;
        background: rgb(7, 193, 96);
        color: #fff;
        padding-left: 10px;
        display: flex;
        align-items: center;

        span {
            margin-left: 50%;
            transform: translateX(-50px);
        }
    }
}
</style>